<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件类型</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    
    <div style="text-align: center;" id="Application">
        <h1>常用事件类型表</h1>
        <table width="100%">
          <tr>
            <th width="15%" style="text-align: left;">事件</th>
            <th width="50%" style="text-align: left;">说明</th>
            <th style="text-align: left;">可用的元素</th>
          </tr>
          <tr v-for="item in event_type">
            <td style="text-align: left;">{{item.name}}</td>
            <td style="text-align: left;">{{item.desc}}</td>
            <td style="text-align: left;">{{item.scope}}</td>
          </tr>
        </table>

        <h1>例子</h1>
        <div @click="click">单击事件</div>
        <div @dbclick="dbclick">双击事件</div>
        <input @focus="focus" @blur="blur" @change="change" @select="select" />
        <div @mousedown="mousedown">鼠标按下</div>
        <div @mouseup="mouseup">鼠标抬起</div>
        <div @mousemove="mousemove">鼠标移动</div>
        <div @mouseout="mouseout" @mouseover="mouseover">鼠标移入移出</div>
        <input @keydown="keydown" @keyup="keyup" />
    </div>

  </body>

  <script>
    const App= {
      data(){
        return {
          event_type:[{
            name:"click",
            desc:"单击事件，当组件被单击时触发",
            scope:"大部分HTML元素",
          },{
            name:"dbclick",
            desc:"双击事件，当组件被双击时触发",
            scope:"大部分HTML元素",
          },{
            name:"focus",
            desc:"获取焦点事件，例如输入框开启编辑模式时触发",
            scope:"input、select、textarea等",
          },{
            name:"blur",
            desc:"失去焦点事件，例如输入框结束编辑模式时触发",
            scope:"input、select、textarea等",
          },{
            name:"change",
            desc:"元素内容改变事件，输入框输入结束后，如内容有变化，会触发此事件",
            scope:"input、select、textarea等",
          },{
            name:"select",
            desc:"元素内容选中事件，输入框中的文本被选中时会触发此事件",
            scope:"input、select、textarea等",
          },{
            name:"mousedown",
            desc:"鼠标按键被按下事件",
            scope:"大部分HTML元素",
          },{
            name:"mouseup",
            desc:"鼠标按键被抬起事件",
            scope:"大部分HTML元素",
          },{
            name:"mousemove",
            desc:"鼠标在组件内移努事件",
            scope:"大部分HTML元素",
          },{
            name:"mouseout",
            desc:"鼠标移出组件时触发",
            scope:"大部分HTML元素",
          },{
            name:"mouseover",
            desc:"鼠标移入组件时触发",
            scope:"大部分HTML元素",
          },{
            name:"keydown",
            desc:"键盘按键被按下",
            scope:"HTML中所有表单元素",
          },{
            name:"keyup",
            desc:"键盘按键被抬起",
            scope:"HTML中所有表单元素",
          }]
        }
      },
      methods: {
        click(){
            console.log("单击事件")
        },
        dbclick(){
            console.log("双击事件")
        },
        focus(){
            console.log("获取焦点")
        },
        blur(){
            console.log("失去焦点")
        },
        change(){
            console.log("内容改变")
        },
        select(){
            console.log("文本选中")
        },
        mousedown(){
            console.log("鼠标按键按下")
        },
        mouseup(){
            console.log("鼠标按键抬起")
        },
        mousemove(){
            console.log("鼠标移动")
        },
        mouseout(){
            console.log("鼠标移出")
        },
        mouseover(){
            console.log("鼠标移入")
        },
        keydown(){
            console.log("键盘按键按下")
        },
        keyup(){
            console.log("键盘按键抬起")
        }
      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

</html>